import { CSSProperties, FC, useEffect, useState } from 'react';

import NumberItem from './item';

interface Iprops {
  value: number | string;
  style?: CSSProperties;
}

const NumberScroll: FC<Iprops> = (props) => {
  const { value = 0, style } = props;
  const [str, setStr] = useState<any[]>([]);
  useEffect(() => {
    const numberStr = typeof value === 'number' ? value.toString() : value;
    const arr = numberStr.split('');
    setStr(arr);
  }, [value]);
  return (
    <div
      style={{
        ...style,
        display: 'inline-flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        overflow: 'hidden',
        height: 44,
      }}
    >
      {str.map((item: any, index: number) => (
        <NumberItem number={item} key={index} style={style}></NumberItem>
      ))}
    </div>
  );
};
export default NumberScroll;
